<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.nickName" placeholder="输入搜索关键字" style="width: 200px;" class="filter-item" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-upload" @click="handleUpload">导入</el-button>
    </div>

    <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row style="width: 100%;">
      	<el-table-column label="编号" type="index" prop="id" align="center" width="60"/>
      	<el-table-column label="姓名" prop="userName" align="center"/>
      	<el-table-column label="手机号" prop="rdd_user.userPhone" align="center" width="130"/>
    	<el-table-column label="身份证号码" prop="userCradId" align="center" width="180"/>
	    <el-table-column label="入职日期" prop="userJoinDate" align="center" width="130">
	        <template slot-scope="scope">
	          <span>{{ scope.row.userJoinDate | parseTime('{y}-{m}-{d}') }}</span>
	        </template>
	    </el-table-column>
	   	<el-table-column label="应聘单位" prop="userCompany" align="center"/>
	    <el-table-column label="工种" align="center" prop="userPosition"/>
	    <el-table-column label="合作商" prop="userPartner" align="center"/>
	    <el-table-column label="反费金额" prop="userReruenFee" align="center"/>
	    <el-table-column label="发放时间" prop="userReturenDate" align="center" width="130">
	        <template slot-scope="scope">
	          <span>{{ scope.row.userReturenDate | parseTime('{y}-{m}-{d}') }}</span>
	        </template>
	    </el-table-column>
	    <el-table-column label="备注" prop="desc" align="center"/>
    </el-table>
    <el-dialog :visible.sync="dialogFormVisible" title="导入反费文件">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px" style="width: 300px; margin-left:50px;">
        <el-form-item :label-width="formLabelWidth" label="选择文件">
          <el-upload :file-list="temp.fileList" :action="host+'/admin/rddReturnfee'" :headers="headers" :limit="1" :on-success="handleSuccess" class="upload-demo">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmHandler">关闭</el-button>
      </div>
    </el-dialog>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="getList" />
  </div>
</template>

	<script>
		import {
			// addReturnFeeAjax,
			fetchReturnFeeAjax
		} from "@/api/finance";
		import waves from "@/directive/waves"; // Waves directive
		import { parseTime } from "@/utils";
		import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

// const calendarTypeOptions = [
// { key: "CN", display_name: "China" },
// { key: "US", display_name: "USA" },
// { key: "JP", display_name: "Japan" },
// { key: "EU", display_name: "Eurozone" }
// ];

// arr to obj ,such as { CN : "China", US : "USA" }
// const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
// 	acc[cur.key] = cur.display_name;
// 	return acc;
// }, {});

export default {
	name: "ComplexTable",
	components: { Pagination },
	directives: { waves },
	filters: {
	},

	data() {
		return {
			tableKey: 0,
			list: [],
			total: 0,
			listLoading: true,
			sortOptions: [
				{ label: "全部", key: "0" },
				{ label: "已注册", key: "1" },
				{ label: "未注册", key: "2" }
			],
			listQuery: {
				pageNum: 1,
				pageSize: 20
			},
			// calendarTypeOptions,
			dialogFormVisible: false,
			downloadLoading: false,
			formLabelWidth: "60px",
			temp: {},
			headers: { Authorization: 'Bearer ' + this.$store.state.user.token },
			host: process.env.BASE_API,
			rules: {}
		};
	},
	created() {
		this.getList();
	},

	methods: {
		confirmHandler() {
			this.dialogFormVisible = false
			this.getList();
		},
		handleSuccess(file, fileList) {
			this.temp.fileList = [];
			this.temp.fileList.push({
				name: fileList.name,
				url: file.data.file
			})
		},
		handleUpload() {
			this.temp = {};
			this.dialogFormVisible = true;
			this.$nextTick(() => {
				this.$refs["dataForm"].resetFields();
			});
		},
		async getList() {
			this.listLoading = true;
			try {
				const result = await fetchReturnFeeAjax(this.listQuery);
				if (result.data.code === 0) {
					this.list = result.data.data.pageData;
					this.total = result.data.data.maxCount;
				}
				this.listLoading = false;
			} catch (err) {
				console.log(err);
				this.listLoading = false;
			}
		},

		handleFilter() {
			this.listQuery.pageNum = 1;
			this.getList();
		},

		formatSex(row) {
			return row.brokerSex === 0 ? '男' : '女';
		},

		formatStatus(row) {
			return row.disabled === 0 ? '有效' : '无效';
		},
		formatJson(filterVal, jsonData) {
			return jsonData.map(v =>
				filterVal.map(j => {
					if (j === "registrationTime") {
						return parseTime(v[j]);
					} else if (j === 'userSex') {
						return v[j] === '0' ? '女' : '男';
					} else if (j === 'disabled') {
						return v[j] === '0' ? '有效' : '无效';
					} else {
						return v[j];
					}
				})
			);
		}
	}
};
</script>
